<template>
  <!-- 首页统计 -->
  <div class="box">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="1"></ceList>
      <div class="con">
        <div class="con-top">
          <div id="myChart" :style="{ width: '941px', height: '380px' }"></div>
        </div>
        <div class="con-bottom">
          <div id="myChart01" :style="{ width: '940px', height: '500px' }"></div>
        </div>
      </div>
    </div>
    <floor></floor>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import ceList from "../../components/ceList.vue";
import titlesearch from "../../components/titlesearch.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
  },
  data() {
    return {
      xuan: 1,
      leibie: 0,
      user: {},
      //圆柱体数据
      pieChart: {},
      sold: [],
      rented: [],
      month: [],

      maxVal: 0,
      minVal: 0,
      // 计算坐标轴分割间隔
      interval: 2
    };
  },
  mounted() {
    this.getUser();
    this.getPieChart();
    //this.drawPie();
    this.drawLine();
  },
  methods: {
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"))
      if (user != null) {
        this.loginstate = true
        this.user = user
        this.imageUrl = user.image
      } else {
        this.loginstate = false
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        this.$router.push("/");
      }
    },
    getPieChart() {
      new Promise((resolve, reject) => {
        if (this.user.businessType == 1) {
          var path = '/mob/home/queryPieChartReport'
          this.$postHttp(path, { userId: this.user.id }).then((data) => {
            if (data.code == 200) {
              this.pieChart = data.result
              resolve()
            }
          })
        }

      }).then(() => {
        this.drawPie()
      })
      //柱状图查询
      new Promise((resolve, reject) => {
        if (this.user.businessType == 1) {
          var path = '/mob/home/queryHistogramReport'
          this.$postHttp(path, { userId: this.user.id }).then((data) => {
            if (data.code == 200) {
              let daysold = data.result;
              // let dayrented = data.result[1].rented.split(',')
              let sold = []
              let rented = []
              let month = []
              daysold.forEach((e) => {
                sold.push(e.num1)
                rented.push(e.num)
                month.push(e.evdate)

              })
              // dayrented.forEach((e)=>{
              // 	rented.push(e.split(':')[1])
              // })
              this.sold = sold
              this.rented = rented
              this.month = month
              /// 获取坐标轴刻度最大值
              this.maxVal = Number(Math.max(...sold, ...rented, 10));
              // 获取坐标轴刻度最小值
              this.minVal = Number(0);
              // 计算坐标轴分割间隔
              this.interval = (this.maxVal - this.minVal) / 5;


              resolve()
            }
          })
        }

      }).then(() => {
        this.drawLine()
      })
    },
    drawPie() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      var that = this
      myChart.setOption({
        title: {
          text: "房源统计图",
          left: "left",
          color: "#000",
          top: 20,
          left: 20,
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}",
        },
        legend: {
          right: 20,
          bottom: 10,
          left: "auto",
          orient: "vertical",
          data: ["已售房源", "已租房源", "未售房源", "未租房源"],
          textStyle: {
            color: "#666666",
          },
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              { value: that.pieChart.sold, name: "已售房源", itemStyle: { color: "#5AA6EF" } },
              { value: that.pieChart.rented, name: "已租房源", itemStyle: { color: "#7ECCC0" } },
              { value: that.pieChart.unsold, name: "未售房源", itemStyle: { color: "#FD5B61" } },
              { value: that.pieChart.NoRented, name: "未租房源", itemStyle: { color: "#FFA350" } },
            ],
            roseType: "radius",
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              show: true,
              // alignTo: "edge",

              // minMargin: 90,
              edgeDistance: 32,
              lineHeight: 18,
              formatter: "{b}{c}",

            }
          },
        ],
      });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart01 = this.$echarts.init(document.getElementById("myChart01"));
      // 绘制图表
      myChart01.setOption({
        title: {
          text: "房源成交走势图（本月）",
          top: 10,
          left: 10,
          padding: 5,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["已售房源", "已租房源"],
          left: "right",
          top: 10,
          padding: 5,
          textStyle: {
            color: "#666666",
          },
        },
        grid: {
          x: 100,
          y: 100,
          x2: 100,
          y2: 100,
          bottom: "5%",
          //  containLable:true
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: this.month,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "总房源",

            min: this.minVal, // 坐标轴刻度最小值。
            max: this.maxVal, // 坐标轴刻度最大值。
            splitNumber: 5, // 坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
            interval: this.interval, // 强制设置坐标轴分割间隔。
            nameTextStyle: {
              padding: [0, 25, 0, 0],
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#666666",
              },
            },
          },
        ],
        series: [
          {
            name: "已售房源",
            type: "bar",
            data: this.sold,
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            itemStyle: {
              normal: {
                color: "#5BA7F1",
              },
            },
          },
          {
            name: "已租房源",
            type: "bar",
            data: this.rented,
            markPoint: {
              data: [
                { name: "Max", value: 182.2, xAxis: 7, yAxis: 183 },
                // { name: "Min", value: 0, xAxis: 7, yAxis: 0 },
              ],
            },
            itemStyle: {
              normal: {
                color: "#7ECCC0",
              },
            },
          },
          // {
          //   name:'已售房源',
          //   type:'line',
          //   itemStyle : {  /*设置折线颜色*/
          //       normal : {
          //         color:'#FFA350'
          //       }
          //   },
          //   data: [
          //     1.0, 5.0, 7, 23, 25, 21, 26, 22, 26, 20, 24, 30],
          // },
          // {
          //   name:'已租房源',
          //   type:'line',
          //   itemStyle : {  /*设置折线颜色*/
          //       normal : {
          //         color:'#F58484'
          //       }
          //   },
          //   data: [1, 3, 6,9, 12, 15, 18, 21,24, 30],
          // }
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;

  .con-top {
    position: relative;
    box-sizing: border-box;
    width: 941px;
    min-height: 380px;
    border: 1px solid #e0e0e0;
    border-radius: 9px;
    opacity: 1;
  }

  .con-bottom {
    position: relative;
    box-sizing: border-box;
    width: 940px;
    min-height: 550px;
    border: 1px solid #e0e0e0;
    border-radius: 9px;
    margin-top: 20px;
  }
}

.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

// .tit {
//   width: 100%;
//   height: 100px;
//   background-color: #f2f2f2;
//   .list {
//     position: relative;
//     width: 1200px;
//     margin-left: 50%;
//     padding-top: 25px;
//     transform: translateX(-50%);
//     background-color: #f2f2f2;
//     div {
//       display: inline-block;
//       vertical-align: middle;
//       font-size: 20px;
//       color: #333333;
//     }
//     .li {
//       font-size: 28px;
//       color: #64b6a8;
//       margin-right: 60px;
//       img {
//         width: 60px;
//         height: 60px;
//       }
//       span {
//         vertical-align: middle;
//       }
//     }
//     .rig {
//       position: absolute;
//       right: 0;
//       .sousuo {
//         position: relative;
//         display: block;
//         width: 380px;
//         height: 50px;
//         background: #ffffff;
//         border-radius: 4px;
//         font-size: 18px;
//         overflow: hidden;
//         display: inline-block;
//         input {
//           width: 300px;
//           height: 55px;
//           line-height: 55px;
//           text-indent: 16px;
//           font-size: 18px;
//         }
//         img {
//           width: 25px;
//           height: 25px;
//           margin-left: 20px;
//           cursor: pointer;
//         }
//         p {
//           position: absolute;
//           top: 0;
//           right: 0;
//           width: 80px;
//           height: 55px;
//           background-color: #64b6a8;
//           text-align: center;
//           line-height: 55px;
//           font-size: 24px;
//           cursor: pointer;
//           color: #ffffff;
//         }
//       }
//       .but {
//         width: 200px;
//         height: 50px;
//         background: #64b6a8;
//         border-radius: 6px;
//         text-align: center;
//         line-height: 50px;
//         color: #fff;
//         margin-left: 30px;
//       }
//     }
//   }
// }
</style>